<script setup>

import Header from "@/components/Header.vue";
import BackTop from "@/components/BackTop.vue";
import {VideoPlayer} from 'vue-video-player';
import {Coin, Download, Share, Star, WarnTriangleFilled} from "@element-plus/icons-vue";
</script>
<template>
  <header>
    <Header></Header>
  </header>
  <BackTop></BackTop>
  <main>
    <div class="page-container">
      <div class="video-title">
        {{ videoInfo.title }}
      </div>
      <div class="player-container">
        <div>
          <video-player
              class="video-player player-video"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
          >
          </video-player>
        </div>
        <div class="video-desc">
          <div>
            <span class="left-desc">
            {{ videoInfo.description }}
          </span>
            <span class="right-control">
              <el-button type="primary" size="large" title="赞" :icon="Coin" circle plain/>
              <el-button type="warning" size="large" title="收藏" :icon="Star" circle plain/>
              <el-button color="#FF1493" size="large" title="分享" :icon="Share" @click="shareVideo" circle/>
              <el-button type="success" size="large" title="下载" :icon="Download" circle/>
              <el-button type="danger" size="large" title="举报" :icon="WarnTriangleFilled" circle/>
              <!--              <svg t="1710409849422" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
              <!--                   xmlns="http://www.w3.org/2000/svg" p-id="4249" width="32" height="32"><path-->
              <!--                  d="M569.6 121.6a19.2 19.2 0 0 1 22.08-18.9824c16.384 2.048 51.5584 25.3056 68.8832 43.392 21.376 19.776 27.0464 52.3712 11.872 78.656l-35.1808 60.9408 0.192-0.0064C614.2784 334.1312 625.7984 358.4 672 358.4h150.0672c42.4128 0 76.8 34.3872 76.8 76.8a76.8 76.8 0 0 1-0.5696 9.2992l-45.2672 371.2A76.8 76.8 0 0 1 776.8 883.2H422.4c-42.4128 0-76.8-34.3872-76.8-76.8V435.2c0-40.2944 31.0336-73.344 70.5024-76.544L416 358.4c21.3632-4.9408 41.1072-20.6912 59.2384-47.2384l86.752-150.2528c0.352-0.608 0.704-1.2096 1.0752-1.792C569.6 144.8512 569.6 139.9488 569.6 121.6zM192 358.4h38.4c35.3472 0 64 28.6528 64 64v396.8c0 35.3472-28.6528 64-64 64h-38.4c-35.3472 0-64-28.6528-64-64V422.4c0-35.3472 28.6528-64 64-64z"-->
              <!--                  fill="#59AAFF" p-id="4250"></path></svg>-->
              <!--              <svg t="1710496451522" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
              <!--                   xmlns="http://www.w3.org/2000/svg" p-id="5289" width="32" height="32"><path-->
              <!--                  d="M726 571c-23.5 24-36.6 65.9-31 99.7l31.5 192-164.6-90.4c-29.3-16-71.7-16.1-100.9 0l-164.6 90.4 31.5-192c5.5-33.8-7.5-75.7-31-99.7L163.2 434.8l184.5-28c32.6-5 66.9-31 81.5-61.8l82.3-174.2L593.7 345c14.6 30.8 48.9 56.8 81.5 61.8l184.5 28L726 571z m213.1-108.4c17.5-17.8 23.8-39.9 17.3-60.6-6.5-20.6-24.1-34.5-48.3-38.2L686 330.1c-8.1-1.2-21.5-11.5-25.2-19.2l-99.3-210.4c-10.8-22.9-29.1-36-50.1-36-20.9 0-39.2 13.2-50 36l-99.3 210.4c-3.7 7.8-17.1 18-25.3 19.2l-222.1 33.7C90.5 367.5 73 381.4 66.5 402s-0.2 42.7 17.3 60.6l160.7 163.7c6 6.1 11.2 22.8 9.7 31.4l-38 231.2c-4.1 25.2 3.2 47 20.2 59.7 8.8 6.6 19 9.9 29.7 9.9 10 0 20.6-2.9 31-8.6l198.7-109.2c7.1-3.9 23.9-3.9 31 0l198.6 109.2c21.6 11.9 43.8 11.4 60.7-1.3 17-12.8 24.4-34.5 20.3-59.7l-38-231.2c-1.4-8.6 3.8-25.3 9.7-31.4l161-163.7z m0 0"-->
              <!--                  p-id="5290" fill="#f4ea2a"></path></svg>-->
              <!--              <svg t="1710496541557" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
              <!--                   xmlns="http://www.w3.org/2000/svg" p-id="6419" width="30" height="30"><path-->
              <!--                  d="M911.6 651.6l0 209.2c0 36-30.4 66.2-66.2 66.2l-699.6 1.2c-35.8 0-65-29.2-65-65.2l1.2-699.6c0-35.8 30.4-66.2 66.2-66.2l387 0L535.2 20.2 148.2 20.2c-81.8 0-143 82.8-143 156.8l0 686c0 77.6 63 140.8 140.8 140.8l686 0c82 0 156.6-68.2 156.6-143L988.6 651.6 911.6 651.6 911.6 651.6zM730.2 60.8l288.6 289.2L730.2 639l0-165.2c0 0-286.4-31.8-453.6 206.6 0 0 52.6-454.4 453.6-454.4L730.2 60.8 730.2 60.8z"-->
              <!--                  fill="#1296db" p-id="6420"></path></svg>-->

            </span>
          </div>
          <div class="video-detail">
            浏览量：{{ videoInfo.watchMount }}
          </div>
        </div>
        <p><strong>评论</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.7万</p>
        <div class="comment-container">
          <div class="comment-border">
            <el-avatar src="http://sabwtvbd6.hn-bkt.clouddn.com/cover.jpg" :size="50" class="avatar">User</el-avatar>
            <div class="comment">
              <span><textarea class="comment-content" placeholder="发表一下自己的看法..."></textarea></span>
              <span><el-button type="success" class="submit-comment">发表</el-button></span>
            </div>
          </div>
          <div class="comment-border">
            <el-avatar src="" :size="50" class="avatar">User</el-avatar>
            <div class="comment"></div>
          </div>
          <div class="comment-border">
            <el-avatar src="" :size="50" class="avatar">User</el-avatar>
            <div class="comment"></div>
          </div>
          <div class="comment-border">
            <el-avatar src="" :size="50" class="avatar">User</el-avatar>
            <div class="comment"></div>
          </div>
        </div>
      </div>
      <div class="playList-container">
        <div v-for="item in playlist" :key="item">
          <div class="play-list">
            <img :src="img+item.cover+last" alt="cover">
          </div>
          <div class="list-desc">
            <p>{{ item.title }}</p>
            <p>2024-03-14</p>
          </div>
        </div>
        <div class="button-more">
          <el-button size="large" type="default">加载更多</el-button>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped>
header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--el-bg-color);
  user-select: none;
}

.page-container {
  width: 80%;
  position: relative;
  margin: auto;
  height: fit-content;
}

.video-title {
  font-size: 24px;
  padding-left: 0.5rem;
  width: 100%;
  height: 50px;
  vertical-align: center;
  position: relative;
  line-height: 50px;
  margin-bottom: -10px;
}

.player-container {
  position: relative;
  width: 70%;
  height: fit-content;
  float: left;
}

.playList-container {
  position: relative;
  margin-top: 1rem;
  width: 25%;
  margin-left: 75%;
  height: 120vh;
  overflow: auto;
}

.player-video {
  position: relative;
  top: 1rem;
  width: 100%;
  height: 400px;
  margin: 0;
}

.video-desc {
  position: relative;
  width: 100%;
  height: 4rem;
  border-top: none;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  background-color: var(--el-bg-color-page);
  border-radius: 0 0 4px 4px;
}

.left-desc {
  position: relative;
  font-size: 18px;
  font-family: "HarmonyOS Sans SC";
  padding-left: 0.5rem;
  padding-top: 0.5rem;
  height: 32px;
  display: inline-block;
}

.right-control {
  position: absolute;
  font-size: 18px;
  font-family: "HarmonyOS Sans SC";
  right: 2.5rem;
  height: 32px;
  top: 8px;
}


.video-detail {
  position: relative;
  font-size: 14px;
  font-family: "HarmonyOS Sans SC";
  line-height: 14px;
  width: 40%;
//margin-top: px; padding-left: 0.5rem;
}

.comment-container {
  position: relative;
  width: 100%;
  height: 600px;
  margin-top: 10px;
  display: inline-block;
  background-color: var(--el-bg-color-page);
}

.comment {
  position: relative;
  width: 80%;
  height: 100px;
  margin-left: 3%;
  top: 2rem;
  border-radius: 3px;
  display: inline-block;
//background-color: var(--el-bg-color); margin-bottom: 2rem;
}

.avatar {
  margin-left: 10px;
}

.play-list {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 8px 8px 0 0;
//padding-right: 1%;
}

.list-desc {
  width: 100%;
  height: 50px;
  border-radius: 0 0 8px 8px;
  margin-bottom: 2rem;
  background-color: var(--el-bg-color-page);
  box-shadow: var(--el-box-shadow-lighter);
  line-height: 25px;
  font-family: "HarmonyOS Sans SC";
  padding-left: 0.5rem;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}

.playList-container::-webkit-scrollbar {
  width: 10px;
  height: 1px !important;
}

.playList-container::-webkit-scrollbar-thumb {
  background: var(--el-bg-color);
  border-radius: 5px;
  height: 30px;
}

.playList-container::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color-hover);
}

.playList-container::-webkit-scrollbar-track {
  border-radius: 10px;
  padding-left: 10px;
}

p strong {
  font-size: 18px;
}

.button-more {
  width: 100%;
  margin: auto;
  position: relative;
  padding-left: 83%;
  top: 20px;
}

svg {
  margin-left: 20px;
}

.comment-content {
  width: 100%;
  height: 100%;
  border: none;
  padding-left: 1%;
  padding-top: 1%;
}

.comment-content:focus {
  outline: none;
}

.submit-comment {
  position: relative;
}

#player {
  width: 100%;
}

</style>
<script>
import 'video.js/dist/video-js.css'
import Api from '@/api/video'

export default {
  mounted() {
    this.getVideoInfo();
    this.getVideoList();
  },
  methods: {
    getVideoInfo() {
      Api.getVideoInfo(this.$route.query.web_code).then(res => {
        this.videoInfo = res.data.data;
      })
    },
    getVideoList() {
      Api.getVideo().then(res => {
        this.playlist = res.data;
      })
    },
    shareVideo() {
      this.$message.success('分享链接已复制，快去发送给小伙伴吧~');
    }
  },
  data() {
    return {
      videoInfo: {},
      playerOptions: {
        // videojs options
        // 是否等浏览器准备好后自动播放
        autoplay: false,
        // 是否静音
        muted: true,
        // 结束后是否重新开始
        loop: false,
        // 语言
        language: 'zh-CN',
        // 播放速度可选列表
        playbackRates: [],
        // 播放视频源
        sources: [
          {
            type: 'video/mp4',
            src: 'http://localhost:9000/static/video/' + this.$route.query.web_code + '.mp4'
          }
        ],
        // 视频比例
        aspectRatio: '16:9',
        //  为 true 时, 播放器具有流畅的大小
        fluid: true,
        // 封面
        // poster: '/static/images/author.jpg'
        //不支持视频源提示
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        //开启控制条
        controls: true,
        controlBar: {
          //当前时间和持续时间的分隔符
          timeDivider: true,
          //显示持续时间
          durationDisplay: true,
          //是否显示剩余时间功能
          remainingTimeDisplay: true,
          //全屏按钮
          fullscreenToggle: true,
          //播放暂停按钮
          playToggle: true,
        }
      },
      playlist: {},
      img: "http://localhost:9000/static/cover/",
      last: ".png"
    }
  },
}
</script>